<template>
  <cloudPage>
    <cloudHeader slot="gHeader" background="#1b1b2b">
      <view class="grace-header-body">
        <!-- 返回按钮 -->
        <view
          class="grace-header-icons grace-icons icon-arrow-left"
          style="color: #fff"
          @tap.stop="handleNavBack"
        ></view>
        <!-- 中间内容 -->
        <view
          class="grace-header-content-noflex grace-text-center"
          style="color: #fff; font-size: 36rpx"
        >
          {{ $t("mf.suanlibao.power_detail") }}
        </view>
        <!-- 右侧按钮 -->
        <view
          class="icons grace-icons"
          style="font-size: 24rpx"
          @click="viewAll"
        >
          {{ $t("new.all") }}
        </view>
      </view>
    </cloudHeader>
    <view class="container">
      <view class="select_date">
        <graceDateTime
          @confirm="confirm"
          :value="select_date"
          :isSecond="false"
          :isTime="false"
          :startYear="2020"
        >
          <view class="select_text">{{
            select_date ? select_date : "请选择时间"
          }}</view>
        </graceDateTime>
      </view>
      <block v-for="(item, index) in rewardList.data" :key="index">
        <view class="date">{{
          item.created_at | moment("YYYY-MM-DD HH:mm")
        }}</view>
        <view class="data_box">
          <view
            class="flex"
            style="margin-bottom: 20rpx"
            v-if="item.mining_num != 0"
          >
            <view class="flex1 data_box_name">{{
              $t("mf.profit.mining_reward")
            }}</view>
            <view class="data_box_num">{{ item.mining_num }} FIL</view>
          </view>
          <view
            class="flex"
            v-if="item.spread_num != 0"
            style="margin-bottom: 20rpx"
          >
            <view class="flex1 data_box_name">{{
              $t("mf.profit.suanlijiangli")
            }}</view>
            <view class="data_box_num">{{ item.spread_num }} M</view>
          </view>
          <view class="flex" v-if="item.team_num != 0">
            <view class="flex1 data_box_name">{{
              $t("mf.profit.team_num")
            }}</view>
            <view class="data_box_num">{{ item.team_num }} FIL</view>
          </view>
          <view class="flex" v-if="item.pingji_num != 0">
            <view class="flex1 data_box_name">{{
              $t("mf.profit.jianshe")
            }}</view>
            <view class="data_box_num">{{ item.pingji_num }} FIL</view>
          </view>
          <view class="flex" v-if="item.m4_num != 0">
            <view class="flex1 data_box_name">M4</view>
            <view class="data_box_num">{{ item.m4_num }} FIL</view>
          </view>
          <view class="flex" v-if="item.m5_num != 0">
            <view class="flex1 data_box_name">M5</view>
            <view class="data_box_num">{{ item.m5_num }} FIL</view>
          </view>
        </view>
      </block>
      <graceLoading
        :loadingType="
          loading['my.reward_list'] ? 1 : rewardList.has_next_page ? 0 : 2
        "
      ></graceLoading>
    </view>
  </cloudPage>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      show: true,
      select_date: null,
    };
  },
  methods: {
    ...mapActions("mf/my", ["loadRewardList"]),
    confirm(data) {
      console.log(data);
      let date = data.join("-");
      console.log(date);
      this.loadRewardList({
        date: date,
      });
    },
    viewAll() {
      this.loadRewardList({ type: "all" });
    },
  },
  computed: {
    ...mapGetters("mf/my", ["rewardList"]),
  },
  onReachBottom() {
    if (this.rewardList.has_next_page && !this.loading["my.reward_list"]) {
      this.loadRewardList({
        page: this.rewardList.current_page + 1,
      });
    }
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  padding: 20rpx;
  box-sizing: border-box;
  position: relative;
  padding-top: 140rpx;
}
.select_date {
  top: 0;
  width: 710rpx;
  height: 100rpx;
  position: absolute;
  box-sizing: border-box;
  text-align: center;
}
.date {
  height: 34rpx;
  font-size: 28rpx;
  font-family: DINAlternate-Bold, DINAlternate;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.4);
  line-height: 34rpx;
  margin-bottom: 24rpx;
  padding: 0 23rpx;
  box-sizing: border-box;
}
.data_box {
  width: 100%;
  min-height: 90rpx;
  background: linear-gradient(270deg, #1b1b2b 0%, #232534 100%);
  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.5);
  border-radius: 12px;
  margin-bottom: 24rpx;
  padding: 32rpx 40rpx;
  box-sizing: border-box;
}
.data_box_name {
  font-size: 28rpx;
  font-family: PingFangSC-Light, PingFang SC;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.59);
}
.data_box_num {
  font-size: 28rpx;
  font-family: DINAlternate-Bold, DINAlternate;
  font-weight: bold;
  color: #fee8b2;
}
.select_text {
  margin-top: 20rpx;
  font-size: 28rpx;
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background: linear-gradient(270deg, #1b1b2b 0%, #232534 100%);
  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.5);
  color: #ffdb86;
  border-radius: 50rpx;
}
</style>